<template>
  <div>
    <div style="margin: auto; width: 90%">
      <el-form :inline="true" :model="car" class="demo-form-inline">
        <el-form-item label="车牌号">
          <el-input
            v-model="car.plate_number"
            placeholder="登录名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="车主">
          <el-input v-model="car.stallname" placeholder="车主姓名"></el-input>
        </el-form-item>
        <el-form-item label="所属车位">
          <el-input
            v-model="car.stall.parkingnum"
            placeholder="所属车位"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="handleAdd"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryCondition"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-delete"
            @click="handleBatchDel"
          ></el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="pageBean.beanList"
      style="width: 95%; margin: auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="车牌号" prop="plate_number"> </el-table-column>
      <el-table-column label="车主姓名" prop="stallname"> </el-table-column>
      <el-table-column label="联系方式" prop="tel"> </el-table-column>
      <el-table-column label="授权开始" prop="firsttime"> </el-table-column>
      <el-table-column label="授权结束" prop="lasttime"> </el-table-column>
      <el-table-column label="所在车位" prop="parkingnum"> </el-table-column>
      <el-table-column prop="path" label="缩略图">
        <template slot-scope="scope">
          <img :src="scope.row.path" style="width: 80px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <!--scope.$index→拿到每一行的index，scope.$row→拿到每一行的数据-->
          <el-button
            type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleRent(scope.$index, scope.row)"
            >车位授权</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleLook(scope.$index, scope.row)"
            >查看图片</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column
                    align="right">
                <template slot-scope="scope">
                    <el-button size="big" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column> -->
    </el-table>

    <!-- 分页插件 -->
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[2, 3, 4, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.totalRecord"
        >
        </el-pagination>
      </div>
    </template>

    <!-- 拟态框 -->
    <el-dialog
      :title="formTitle"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeDialog"
    >
      <el-form :model="carForm">
        <el-form-item label="车牌号码" prop="plate_number">
          <el-input
            v-model="carForm.plate_number"
            :disabled="Enable"
          ></el-input>
        </el-form-item>
        <el-form-item label="车主" prop="stallname">
          <el-input v-model="carForm.stallname"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="carForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="授权日" prop="firsttime">
          <el-date-picker
            v-model="carForm.firsttime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="授权日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回收日" prop="lasttime">
          <el-date-picker
            v-model="carForm.lasttime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="回收日"
            width="200"
          >
          </el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="出租状态">
          <el-select v-model="carForm.isrenting" placeholder="---请选择---">
            <el-option label="未出租" value="0"></el-option>
            <el-option label="已出租" value="1"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="绑定车位" prop="stall.parkingnum">
          <el-select
            v-model="employeeModify.department.did"
            placeholder="--请选择--"
            width="200px"
            clearable
          >
            <el-option
              v-for="item in departments"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="绑定车位" prop="parkingnum">
          <el-input v-model="carForm.parkingnum" :disabled="Enable"></el-input>
        </el-form-item>
        <el-form-item label="车辆图片">
          <template v-if="carForm.path">
            <img
              :src="carForm.path"
              style="width: 300px; height: 250px"
              class="car-image"
            />
          </template>
          <template v-else>
            <div class="upload-button">
              <input type="file" accept="image/*" @change="handleUpload" />
            </div>
            <div class="placeholder-image"></div>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleModify">{{
          formBtnTxt
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 查看大图 -->
    <el-dialog :visible.sync="showHead" width="35%">
      <template>
        <el-image
          style="width: 300px; height: 300px"
          :src="imageUrl"
          :fit="fit"
        ></el-image>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageBean: {},
      carForm: {},
      car: { stall: { parkingnum: "" } },
      carForm: { stall: { parkingnum: "" } },
      pageIndex: 1,
      pageSize: 5,
      formTitle: "",
      formBtnTxt: "",
      dialogVisible: false,
      showHead: false,
      imageUrl: "",
      Enable: true,
      fit: "contain",
      multipleSelection: [],
    };
  },
  methods: {
    closeDialog() {
      this.carForm = {};
    },
    close() {
      this.dialogVisible = false;
    },
    //多选按钮事件改变时调用
    handleSelectionChange(row) {
      this.multipleSelection = row;
    },
    handleSizeChange(size) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = size;
      this.queryCondition();
    },
    handleCurrentChange(page) {
      //console.log(`当前页: ${page}`);
      this.pageIndex = page;
      this.queryCondition();
    },
    //点击新增车辆
    handleAdd() {
      this.carForm = {};
      this.formTitle = "新增车辆信息";
      this.formBtnTxt = "新增车辆";
      this.dialogVisible = true;
      this.Enable = false;
    },
    //查看大图
    handleLook(index, row) {
      this.imageUrl = row.path;
      console.log(this.imageUrl);
      this.showHead = true;
    },
    //车辆编辑
    handleEdit(index, row) {
      this.formTitle = "修改车辆信息";
      this.formBtnTxt = "修改车辆";
      this.carForm = row;
      // console.log(this.carForm);
      this.dialogVisible = true;
      this.Enable = true;
    },
    queryCondition() {
      this.$axios
        .post(
          "/car/findAllCars/" + this.pageIndex + "/" + this.pageSize,
          this.pageBean
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.pageBean = res.data.data;
          }
        });
    },
    handleDelete(index,row) {
      console.log(row.id);
      this.$confirm("此操作将此操作将失去维护的车辆数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/car/remove/" + row.id).then((res) => {
            alert("ahh")
            if (res.data.code == 200) {
              this.$message({
                message: "删除成功！",
                type: "success",
              });
              this.queryCondition();
            }
            if (res.data.code == 500) {
              this.$message.error(res.data.msg + "删除失败！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
     handleBatchDel() {
      if (this.multipleSelection.length > 0) {
        this.$confirm("此操作将永久删除所选车辆数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let ids = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
              ids.push(this.multipleSelection[i].id);
            }
            console.log(ids);
            this.$axios
              .post("/car/batchedDel", {ids: ids})
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              });
            this.queryCondition();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message("请选择要删除的数据！");
      }
    },
    //图片上传
    handleUpload(event) {
      //文件上传方法
      this.selectedFile = event.target.files[0]; //selectedFile用于存储用户选择的文件
      //创建FormData对象
      var formdata = new FormData();
      formdata.append("file", this.selectedFile);
      //FormData.append() 方法转换成字符串（字段类型可以是 Blob、File 或者字符串：如果它的字段类型不是 Blob 也不是 File，则会被转换成字符串类）
      //设置上传文件的类型
      var header = { "Content-Type": "multipart/form-data" };
      //发送异步请求实现文件上传
      this.$axios
        .post("/car/updateCarimg", formdata, { headers: header })
        .then((res) => {
          if (res.data.code==200) {
            console.log(res.data);
            this.$message({
              message: "文件上传成功!",
              type: "success",
            });
            // //关闭对话框
            // this.dialogVisible = false;
            //把文件访问地址赋值给img标签
            this.carForm.path = res.data.data;
            console.log(this.carForm.path);
          }
        });
    },

    //对话框按钮
    handleModify() {
      if (this.formBtnTxt == "新增车辆") {
        this.$axios.post("/car/add", this.carForm).then((res) => {
          if (res.data.code==200) {
            //清空表单
            this.carForm = {};
            //隐藏对话框
            this.dialogVisible = false;
            this.$message({
              message: "添加车辆成功!",
              type: "success",
            });
            // 刷新当前页面
            location.reload();
          }
        });
      } else {
        this.$axios.post("/car/modify", { params: this.carForm }).then((res) => {
          if (res.data.code==200) {
            //清空表单
            this.carForm = res.data.data;
            console.log(this.carForm);
            //隐藏对话框
            this.dialogVisible = false;
            this.$message({
              message: "修改车辆成功!",
              type: "success",
            });
            //清空表单
            console.log(this.carForm);
            location.reload();
          }
        });
      }
    },
  },
  mounted() {
    this.queryCondition();
  },
};
</script>

<style>
</style>